@import '../../var.less';

.gen-value-style(@color) {
  color: @color;
}

.@{css-prefix}-tree__node {
  display: flex;
  position: relative;

  &.has-selector {
    padding-left: @selector-span;
  }

  &.is-highlight,
  &:hover {
    background-color: @highlight-bg-color;
  }

  .@{css-prefix}-tree__indent {
    flex: 0 0 1em;

    &.has-line {
      border-left: 1px dashed @border-color;
    }
  }
}

.@{css-prefix}-comment {
  color: @comment-color;
}

.@{css-prefix}-value__null {
  .gen-value-style(@color-null);
}

.@{css-prefix}-value__number {
  .gen-value-style(@color-number);
}

.@{css-prefix}-value__boolean {
  .gen-value-style(@color-boolean);
}

.@{css-prefix}-value__string {
  .gen-value-style(@color-string);
}
